<template>

  <div class="filter-container">

    <el-form
      :inline="true"
      :model="formData"
      label-position="right"
      size="small"
      class="filter-form-inline"
    >
      <el-row
        :gutter="20"
        style="margin-left: 0px; margin-right: 0px"
      >
        <el-col
          :lg="5"
          :xs="4"
        >
          <el-form-item
            label="终端名称"
            style="width: 100%"
          >
            <el-input
              v-model="formData.terminalName"
              clearable
              placeholder="输入终端名称"
            />
          </el-form-item>
        </el-col>

        <el-col
          :lg="5"
          :xs="4"
        >
          <el-form-item
            label="产品信息"
            style="width: 100%"
          >
            <el-select
              v-model="formData.productId"
              filterable
              remote
              reserve-keyword
              :remote-method="remoteMethod"
              :loading="loading"
              placeholder="请选择产品"
              @change="listSearch"
            >
              <el-option
                v-for="item in products"
                :key="item.productId"
                :label="item.name"
                :value="item.productId"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col
          :lg="5"
          :xs="4"
        >

          <el-form-item label="终端所在地">
            <el-cascader
              ref="cascader"
              v-model="formData.areas"
              :popper-append-to-body="false"
              :options="citys"
              :props="props1"
              placeholder="请选择地区"
              collapse-tags
              @change="areaChange"
            />
          </el-form-item>
        </el-col>

        <el-col
          :lg="2"
          :xs="2"
        >
          <el-form-item style="width: 100%">
            <more-search-btn v-model:is-more="visible" />
          </el-form-item>
        </el-col>

        <el-col
          :lg="4"
          :xs="4"
        >
          <el-form-item style="width: 100%">
            <el-button
              class="border-btn"
              @click="reset"
            >重置</el-button>
            <el-button
              type="primary"
              class="main-btn"
              @click="listSearch"
            >搜索</el-button>
          </el-form-item>
        </el-col>

        <template v-if="visible">

          <el-col
            :lg="8"
            :xs="7"
          >
            <el-form-item
              label="开发期限截至日期"
              style="width: 100%"
            >
              <date-range-picker
                v-model:date="formData.date"
                clearable
                style="width: 100%;"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>

        </template>

      </el-row>
    </el-form>

  </div>

  <table-view
    :data="tableData"
    :visible="visible"
    @row-click="rowClick"
  >
    <el-table-column
      show-overflow-tooltip
      align="left"
      header-align="center"
      prop="terminalName"
      label="终端名称"
      :min-width="150"
    />
    <el-table-column
      show-overflow-tooltip
      align="center"
      header-align="center"
      prop="agentName"
      label="所在地区"
      :min-width="100"
    >
      <template #default="scope">
        <span>{{ scope.row.provinceName }}/{{ scope.row.cityName }}/{{ scope.row.areaName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      align="left"
      header-align="center"
      prop="productPopularName"
      label="产品名称"
      :min-width="150"
    />
    <el-table-column
      show-overflow-tooltip
      align="center"
      header-align="center"
      prop="approvalNumber"
      label="批准文号"
      :min-width="150"
    />
    <el-table-column
      show-overflow-tooltip
      align="center"
      header-align="center"
      prop="packSpecs"
      label="包装规格"
      :min-width="100"
    />
    <el-table-column
      align="center"
      header-align="center"
      label="准入模式"
      :min-width="100"
    >
      <template #default="scope">
        {{ getLabel('access_mode',scope.row.accessMode) }}
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      header-align="center"
      label="终端价(元)"
      :min-width="100"
    >
      <template #default="scope">
        <div>{{ scope.row.terminalPrice }}</div>

        <div
          v-if="scope.row.processDefinitionKey==='productPriceChange'&&scope.row.flowStatus==='DOING'"
          class="flow-status-color"
        >
          [终端价变更审核中]
        </div>
        <div
          v-if="scope.row.processDefinitionKey==='relationStandardChangeTerminalPrice'&&scope.row.flowStatus==='DOING'"
          class="flow-status-color"
        >
          [更换终端价审核中]
        </div>
      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      align="left"
      header-align="center"
      prop="planName"
      label="关联招商计划"
      :min-width="100"
    />
    <el-table-column
      align="center"
      header-align="center"
      label="开发期限截至日期"
      :min-width="150"
    >
      <template #default="scope">
        {{ dateFormat('yyyy-mm-dd',scope.row.expireTime) }}
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      header-align="center"
      label="开发保证金(元)"
      :min-width="150"
    >
      <template #default="scope">
        {{ scope.row.devEarnestMoney }}
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      header-align="center"
      label="最低销量"
      :min-width="150"
    >
      <template #default="scope">
        <span v-if="scope.row.minSale">{{ scope.row.minSale }}{{ getLabel('sell_unit',scope.row.sellUnit) }}/{{ getLabel('sell_num_unit',scope.row.minSaleUnit) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      header-align="center"
      label="销量保证金(元)"
      :min-width="150"
    >
      <template #default="scope">
        {{ scope.row.sellEarnestMoney }}
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      header-align="center"
      label="状态"
      fixed="right"
      :min-width="150"
    >
      <template #default="scope">
        <div class="tab-line">
          <div>{{ getStatus(scope.row) }}</div>

          <div
            v-if="scope.row.flowStatus == 'DOING'"
            class="flow-status-color"
          >审核中</div>
        </div>

      </template>
    </el-table-column>
    <el-table-column
      align="center"
      header-align="center"
      label="操作"
      fixed="right"
      :min-width="150"
    >
      <template #default="{row}">
        <el-button
          v-if="row.flowStatus != 'DOING'"
          type="text"
          @click="handlTo(row)"
        >注册终端</el-button>
      </template>
    </el-table-column>
  </table-view>

  <Pagination
    v-model:page="formData.page"
    v-model:limit="formData.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="getListData"
  />

</template>

<script>
import area from '../../../../../../../utils/area'
import {defineComponent, getCurrentInstance, inject, onBeforeMount, reactive, toRefs,} from 'vue'

export default defineComponent({
  name: 'WaitView',
  setup(props, { emit }) {
    const api = inject('api')
    const props1 = reactive({
      multiple: true,
      expandTrigger: 'hover',
      label: 'regionName',
      value: 'regionCode',
    })
    const currentInstance = getCurrentInstance()

    var data = reactive({
      formData: {
        page: 1,
        pageSize: 20,
        date: [],
        terminalName: '',
        areas: [],
        region: [],
        productId: '',
      },
      tableData: [],
      total: 0,
      registeredDialog: null,
      visible: false,
      cascader: null,
      citys: area,
      loading: false,
      products: [],
    })

    const reset = () => {
      data.formData.terminalName = ''
      data.formData.page = 1
      data.formData.headId = ''
      data.formData.date = []
      data.formData.areas = []
      data.formData.region = []
      data.formData.productId = ''
      data.formData.loading = false
      data.formData.products = []
      data.tableData = []
      getListData()
    }

    const listSearch = () => {
      data.formData.page = 1
      data.tableData = []
      getListData()
    }

    const remoteMethod = (query) => {
      data.products = []
      data.loading = true

      const a = {
        productName: '',
        devStatusType: 1,
      }
      if (query) {
        a.productName = query
      }

      api.supplyChannels.SUPPLY_CHANNELS_FORMAL_DEV_LIST(a).then((res) => {
        data.loading = false
        if (!res.code && res.data) {
          res.data.forEach((item) => {
            item.name =
              item.productPopularName + item.approvalNumber + item.packSpecs
          })
          data.products = res.data

          data.loading = false
        }
      })
    }

    const getListData = () => {
      const a = JSON.parse(JSON.stringify(data.formData))
      a.devStatusType = 1
      a.headId = Number(a.headId)
      a.productId = Number(a.productId)
      if (a.date && a.date.length) {
        a.expireTimeStartTime = a.date[0]
        a.expireTimeEndTime = a.date[1]
      }
      api.supplyChannels.SUPPLY_CHANNELS_LIST(a).then((res) => {
        if (!res.code && res.data) {
          data.tableData = res.data.list
          data.total = res.data.total
        }
      })
    }

    const refreshData = () => {
      getListData()
    }

    const areaChange = (val) => {
      const serve = currentInstance.proxy.getServeAreaData(
        val,
        data.cascader.getCheckedNodes()
      )
      data.formData.region = serve
      listSearch()
    }

    const rowClick = (row) => {}

    const handlTo = (row) => {
      // data.registeredDialog.open(row, null,1)

      emit('handlTo', row)
    }

    const getStatus = (row) => {
      switch (row.devStatus) {
        case '-2':
          return '开发失败'
        case '-1':
          return '审核未通过'
        case '1':
          return '待开发'
        case '2':
          return '开发中'
        case '4':
          return '待进货'
        case '5':
          return '开发成功'
      }
    }

    onBeforeMount(() => {
      getListData()
    })

    return {
      ...toRefs(data),
      props1,

      getListData,
      rowClick,
      getStatus,
      handlTo,
      reset,
      listSearch,
      areaChange,
      remoteMethod,
      refreshData,
    }
  },
})
</script>

<style scoped>
</style>
